<template>
	<view class="category">
		<view class="item" @click="openSelect(item)" :class="{'current': item.checked}" v-for="(item,index) in list"
			:key="index">
			<view class="title-wrapper">
				<text>{{ item.name }}</text>
				<uni-icons type="right" size="18" color="#D5D5D5" class="icon"></uni-icons>
			</view>
			<view class="describe" v-if="!item.desc || !item.desc.length">
				请选择
			</view>
			<view class="describe" v-else>
				<view class="desc-item" v-for="(items,indexs) in item.desc" :key="indexs">
					{{ items }}
				</view>
			</view>
		</view>
		<view class="btn-wrapper" v-if="list.length" @click="submit">
			确定
		</view>

		<uni-popup ref="popupSelect">
			<view class="popup-wrapper">
				<view class="title-wrapper">
					<uni-icons type="closeempty" size="24" color="#454545" class="icon" @click="close"></uni-icons>
					<text>添加关注的品类</text>
					<view class="btn" @click="save">
						保存
					</view>
				</view>
				<view class="content-wrapper">
					<view class="item current" v-for="(item,index) in childList" :key="index">
						<text>{{ item.name }}</text>
						<uni-icons type="clear" color="#555BFF" @click="remove(item)" class="close-icon"
							size="20"></uni-icons>
					</view>
					<view class="item new" @click="newCategory">
						<uni-icons type="plusempty" size="18" color="#555BFF" class="icon"></uni-icons>
						<text>添加品类</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import selectItem from '@/subPage_supplier/register/uni-select-item/index.vue'

	export default {
		data() {
			return {
				list: [],
				checkedItem: {},
				childList: [],
				selectList: [],
				selectTitle: '',
				show: false,
				removeItem: [],
				supplierId: ''
			}
		},
		computed: {
			// org(){
			// 	return this.$store.state.userInfo.orgRelation.org
			// }
		},
		onLoad(option) {
			if (option.supplierId) {
				this.supplierId = option.supplierId;
			}
		},
		mounted() {
			if (uni.getStorageSync('businessCategory')) {
				this.selectList = uni.getStorageSync('businessCategory').map(item => {
					return {
						parentId: item.categoryIdI,
						id: item.categoryIdIi,
						name: item.categoryName
					}
				});
			}
			this.getData()
			//console.log(uni.getStorageSync('userInfo'))
		},
		methods: {
			async getData() {
				let list = [];
				if (this.$store.state.productCategoryList.length) {
					list = this.$store.state.productCategoryList;
				} else {
					const data = await this.$api.get('/adm/category/tree', {
						status: 1
					});
					if (data.code === 200) {
						list = data.data;
						this.$store.commit('setProductCategoryList', data.data);
					}
				}
				this.list = list;
				this.setList();
			},
			setList() {
				this.list.forEach(item => {
					let desc = [];
					item.checked = false;
					if (this.selectList.length) {
						this.selectList.forEach(items => {
							if (item.id === items.parentId) {
								desc.push(items.name)
								item.checked = true;
							}
							item.desc = desc;
						})
					} else {
						item.desc = [];
					}
				})
				this.list = JSON.parse(JSON.stringify(this.list))
			},
			openSelect(obj) {
				this.childList = [];
				//this.removeItem = [];
				this.selectList.forEach(items => {
					if (obj.id === items.parentId) {
						this.childList.push(items)
					}
				})
				obj.children.forEach(item => {
					item.checked = false;
					this.childList.forEach(items => {
						if (item.id === items.id) {
							item.checked = true;
						}
					})
				})
				uni.setStorageSync("categoryII", obj)
				uni.navigateTo({
					url: '/subPage_supplier/register/categoryII'
				})
				// this.checkedItem = item;

				// this.$refs.popupSelect.open('bottom');
			},
			remove(item) {
				this.removeItem.push(item.id)
				this.childList = this.childList.filter(items => {
					return items.id !== item.id;
				})
			},
			close() {
				this.$refs.popupSelect.close();
			},
			newCategory() {

				this.checkedItem.children.forEach(item => {
					item.checked = false;
					this.childList.forEach(items => {
						if (item.id === items.id) {
							item.checked = true;
						}
					})
				})
				uni.setStorageSync("categoryII", this.checkedItem)
				uni.navigateTo({
					url: '/subPage_mine/categoryII'
				})
			},
			changeItem(obj) {
				this.selectList = this.selectList.filter(item => {
					return obj.parentId !== item.parentId
				})
				this.selectList = this.selectList.concat(obj.list);
				this.setList();
			},
			save() {
				const arr = this.selectList.concat(this.childList);
				let arrNew = new Set(arr);

				this.selectList = Array.from(arrNew);
				if (this.removeItem.length) {
					this.selectList = this.selectList.filter(item => {
						return !this.removeItem.includes(item.id);
					})
				}
				this.setList();
				this.$refs.popupSelect.close();
			},
			async submit() {
				console.log(this.selectList)
				if (this.selectList.length) {
					const orgCategories = this.selectList.map(item => {
						return {
							categoryIdI: item.parentId,
							categoryIdIi: item.id,
							categoryName: item.name
						}
					});
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					if (prevPage == undefined || prevPage == null) return;
					if (this.supplierId) {
						const data = await this.$api.put('/adm/supplier', {
							id: this.supplierId,
							businessCategory: JSON.stringify(orgCategories)
						});
						if (data.code === 200) {
							prevPage.$vm.getInfo(this.supplierId);
						}
					} else {
						prevPage.$vm.setCategory(orgCategories);
					}
					uni.navigateBack()
				} else {
					uni.showToast({
						icon: 'none',
						title: '至少要选择一个品类'
					})
					//uni.navigateBack()
				}
			}
		},
		components: {
			selectItem
		}
	}
</script>

<style lang="scss" scoped>
	.category {
		height: 100%;
		padding: 0 20upx 150rpx 20rpx;
		overflow: auto;

		.item {
			background-color: #ffffff;
			border-radius: 16upx;
			margin-top: 20upx;
			padding: 30upx 30upx 10upx 30upx;

			&.current {
				box-shadow: 0 0upx 10upx 0 #cecece;
				border: 2upx solid #555BFF;
			}

			.title-wrapper {
				display: flex;
				align-items: center;
				font-weight: 500;
				color: #050505;
				justify-content: space-between;
				font-size: 36upx;

				.icon {
					font-weight: bold;
				}
			}

			.describe {
				margin-top: 15upx;
				font-size: 26upx;
				color: #787878;
				display: flex;
				flex-wrap: wrap;

				.desc-item {
					padding: 2upx 20upx;
					background-color: #F0F2FA;
					border-radius: 90upx;
					margin-right: 20upx;
					color: #57595E;
					font-size: 26upx;
					margin-bottom: 20upx;
				}
			}
		}

		.btn-wrapper {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 98upx;
			background-color: #555BFF;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: .15s linear;

			&:active {
				background-color: #555BFF88;
			}
		}


		.popup-wrapper {
			background-color: #ffffff;
			border-radius: 20upx 20upx 0 0;
			min-height: 600upx;

			.title-wrapper {
				height: 98upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				font-size: 36upx;

				.icon {
					position: absolute;
					left: 32upx;
					font-weight: bold;
				}

				.btn {
					color: #555BFF;
					font-size: 32upx;
					position: absolute;
					right: 32upx;
				}
			}

			.content-wrapper {
				display: flex;
				flex-wrap: wrap;
				padding: 32upx;

				.item {
					position: relative;
					padding: 15upx 40upx;
					border-radius: 40upx;
					background-color: #f9f9f9;
					color: #343434;
					border: 2upx solid #cecece;
					margin-right: 30upx;
					margin-bottom: 30upx;

					&.current {
						background-color: #555BFF12;
						color: #555BFF;
						border: 2upx solid #555BFF;
					}

					.close-icon {
						position: absolute;
						right: -10upx;
						top: -10upx;
					}
				}
			}
		}
	}
</style>